


import React, { FC, useEffect, useRef, useState } from 'react'
import './index.scss'
import { useGotoPage, useTimeDownCounter } from '@/hooks/common';
import IMG from '@/assets/images/503.png'
import { numTypes, spanTypes } from '@/utils/type';
import Dao from '@/components/Dao';

const BadServe:FC = () => {
    const bgstar = useRef<any>()
    const  [counter]  = useTimeDownCounter(10000)
    const [gotopage] = useGotoPage()
    const [spanList,setSpanList] = useState<spanTypes[]>([])

    const spanListInit = ()=>{
        const width = bgstar.current.clientWidth
        const height:any  = document.getElementById('bgstar')?.clientHeight 

        for(var i = 0;i< 520; i++){
            var left:numTypes = Math.random() * width;
            var top:numTypes = Math.random() * height;
    
            var scaler = Math.random()  * 1.5;
            var rate = Math.random() * 2.5 
            var opacity = Math.random() * 1;
    
            spanList.push({
                left:left+'px',
                top:top+'px',
                transform:`scale(${scaler})`,
                animationDelay:rate+'s',
                background:`rgba(255,255,255,${opacity})`
            })
        }

        setSpanList([...spanList])  // 深拷贝 
    }

    useEffect(()=>{
        spanListInit()
    },[])

    return (
        <div id="bgstar" className='errorpage' ref={bgstar}  style={{position:'absolute',top:0,left:0,width:'100%',height:'100%'}}>
            <div className="down" onClick={ ()=>gotopage('/app') } >{counter} S 跳转</div>
            <Dao time={5}></Dao>
            <img src={IMG}  className='myimg' alt="" />
            {
                spanList.map((item,index)=>{
                    return (
                        <span key={index} style={item} className='spandot'></span>
                    )
                })
            }
        </div>
    )
}

export default BadServe